import type { ZhiHuQuestionElements } from '../../../../../../../../types/constants/personalization/zhi_hu_question'
import { ThemeVarService } from '../../../../../../../../lib/abstract/style/theme_var/service'
import { ICON_IDS } from '../../../../../../../../lib/icons/types/constants'
import { PollingHandler } from '../../../../../../../../lib/polling_handler'
import { ToolKit } from '../../../../../../../../lib/utils/toolkit'
import {
  BodyAttrs,
  logger,
  PAGE_ELEMENTS,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../types/constants'
import {
  OFFICIAL_PAGE_STYLES,
  PAGE_CONTENT_WIDTH,
} from '../../../../../../../../types/constants/offical'

export class ZhiHuQuestionCommonPage {
  private readonly name: string = 'ZhiHuQuestionCommonPage'
  elements: ZhiHuQuestionElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.ZHI_HU_QUESTION]
  private static instance: ZhiHuQuestionCommonPage
  protected readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()
  protected readonly pollingHandler: PollingHandler = PollingHandler.getInstance()

  readonly pageWidth: string = PAGE_CONTENT_WIDTH
  readonly padding: string = OFFICIAL_PAGE_STYLES[SUPPORTED_PLATFORMS.ZHI_HU_QUESTION].padding

  get isLoggedIn(): boolean {
    return ToolKit.browser.platform.isLoggedIn() ?? false
  }

  /**
   * 获取单例实例
   */
  public static getInstance(): ZhiHuQuestionCommonPage {
    if (!ZhiHuQuestionCommonPage.instance) {
      ZhiHuQuestionCommonPage.instance = new ZhiHuQuestionCommonPage()
    }
    return ZhiHuQuestionCommonPage.instance
  }

  init(): void {
  }

  /**
   * 【评论按钮】点击事件
   */
  setupCommentButtonClick(): void {
    $(document.body).on('click', '.ContentItem-actions > .ContentItem-action:has(svg.Zi--Comment):not(:contains("收起评论"))', () => {
      const selector = '.Comments-container .public-DraftEditorPlaceholder-inner'

      const handler = () => {
        this.updateCommentPlaceholderContent(selector)
      }
      this.pollingHandler.api.awaitElement(selector, handler)
    })
  }

  /**
   * 【评论输入框】更新占位符内容
   */
  updateCommentPlaceholderContent(selector: string): void {
    if (this.isLoggedIn)
      return

    const $commentPlaceholder = $(selector)

    if (!$commentPlaceholder || $commentPlaceholder.length === 0) {
      logger.warn(`[${this.name}] [评论输入框] 占位符元素不存在`)
      return
    }

    if ($commentPlaceholder.attr(BodyAttrs.PROCESSED_ELEMENT) === 'true')
      return

    $commentPlaceholder
      .text('登录后才能评论')
      .attr(BodyAttrs.PROCESSED_ELEMENT, 'true')

    logger.attention(`[${this.name}] [评论输入框] 占位符内容已更新`)
  }

  getMainStyles(): string {
    return `
#root {
  /* 去掉多余高度 */
  > div > div:empty {
    height: unset !important;
  }
  
  .AppHeader {
    background-color: var(${this.themeVarService.tieBar.header.background}) !important;
    box-shadow: unset !important;
    
    nav {
      > a {
        color: var(${this.themeVarService.tieBar.default.text}) !important;
        
        &:hover {
          color: var(${this.themeVarService.link.default.text}) !important;
          font-weight: normal !important;
        }
      }
    }
    
    .Popover {
      button:not([aria-label="创作"]) {
        color: var(${this.themeVarService.tieBar.default.text}) !important;
        
        &:hover {
          color: var(${this.themeVarService.link.default.text}) !important;
        }
      }
    }
    
    /* 悬浮标题 */
    .PageHeader {
      .QuestionHeader-title {
        color: var(${this.themeVarService.title.default.primary}) !important;
      }
    }
  }
}

.QuestionPage .Question-main, .QuestionHeader, .Question-main .Question-mainColumn {
  width: ${this.pageWidth} !important;
}

.QuestionHeader {
  margin: 0 auto !important;
  padding: 16px !important;
  min-width: unset !important;
  background-color: var(${this.themeVarService.tieBar.default.background}) !important;
  box-shadow: unset !important;
  color: var(${this.themeVarService.tieBar.default.text}) !important;
  
  .QuestionHeader-content {
    display: flex !important;
    justify-content: flex-start !important;
    padding-left: 0 !important;
    max-width: ${this.pageWidth} !important;
    width: 100% !important;

    .QuestionHeader-main {
      /* 标签 */
      .QuestionHeader-tags {
        .Tag-content {
          a > div:hover {
            color: var(${this.themeVarService.tag.blue.textHover}) !important;
          }
        }
      }
      
      /* 标题 */
      .QuestionHeader-title {
        color: var(${this.themeVarService.title.default.primary}) !important;
      }
      
      /* 描述 */
      .QuestionRichText {
        color: var(${this.themeVarService.tieBar.default.text}) !important;
        
        &:hover {
          color: var(${this.themeVarService.tieBar.default.text}) !important;
        }
      }
    }
    
    .QuestionHeader-side {
      .QuestionFollowStatus > .NumberBoard {
        .NumberBoard-item {
          display: flex !important;
          flex-direction: column !important;
          justify-content: flex-start !important;
          
          &:first-child .NumberBoard-itemName::before {
            background-image: var(${this.themeVarService.generateIcon(ICON_IDS.role.author)});
          }
          
          &:last-child .NumberBoard-itemName::before {
            background-image: var(${this.themeVarService.generateIcon(ICON_IDS.action.view)});
          }
          
          .NumberBoard-itemName {
            position: relative;
            padding-left: 22px;
            line-height: 1.4;
            text-align: left;

            &::before {
              content: "";
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              left: 0;
              width: 16px;
              height: 16px;
              margin-right: 6px;
              
              background-size: contain;
              background-repeat: no-repeat;
            }
          }
          
          .NumberBoard-itemValue {
            color: var(${this.themeVarService.default.base.primary}) !important;
          }
        }
      }
    }
  }

  .QuestionHeader-footer {
    background-color: var(${this.themeVarService.tieBar.default.background}) !important;
    
    /* 操作按钮 */
    .QuestionHeaderActions {
      button:hover {
        color: var(${this.themeVarService.link.default.text}) !important;
      }
    }
  }
}

/* 内容反馈或用户中心 */
.Popover-content .Menu {
  > :is(a, button):hover {
    color: var(${this.themeVarService.link.default.text}) !important;
  }
  
  /* 退出登录 */
  > a[href$="logout"]:hover {
    color: var(${this.themeVarService.message.error.textPrimary}) !important;
  }
}
    `
  }
}
